<template>
  <div class="personal-center">
    <div class="herder">
      <div class="header-bg">
        <!-- <img src="../../../../static/image/personalCenter/1251.jpg" alt /> -->
      </div>
      <div class="header-content">
        <div class="user-logo">
          <img :src="userInfo.employeeIcon" alt />
        </div>
        <div class="user-info">
          <p class="fl">
            <span class="username">{{userInfo.name }}</span>
            <br />
            <span>
              <Icon type="md-bookmarks icon-col" />
              {{userInfo.roleName}}
            </span>
            <br />
            <span>
              <Icon type="md-body icon-col" />
              {{userInfo.employeeNO}}
            </span>
            <br />
            <span>
              <Icon type="ios-podium icon-col" />
              {{userInfo.managecomName}}
            </span>
          </p>
          <div class="fr action">
            <Button type="primary" class="mr10" @click="updateUser">修改信息</Button>
            <Button type="primary" class="mr10" @click="ModifyPasswordModal=true">修改密码</Button>
            <Uploadv
              class="fr"
              :action="action1"
              name="multipartFile"
              :data="{id:this.userInfo.id}"
              :headers="{Authorization:token}"
              :on-success="handleSuccess"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
            >
              <Button type="primary" class="mr40">修改头像</Button>
            </Uploadv>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改信息对话框 -->
    <Modal v-model="ModifyInfoModal" title="更新用户信息" footer-hide="true" class="upModal" :mask-closable="false">
      <Form ref="formInline" :model="userInfo2" :rules="updateRules">
        <Row gutter="16">
          <i-col span="12">
            <FormItem prop="name">
              <i-input type="text" v-model="userInfo2.name" placeholder="用户名"></i-input>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem prop="phone">
              <i-input type="text" v-model="userInfo2.phone" placeholder="电话"></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="16">
          <i-col span="12">
            <FormItem prop="email">
              <i-input type="text" v-model="userInfo2.email" placeholder="邮箱"></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="16">
          <i-col span="24" style="margin-top:10px; text-align:right;">
            <FormItem>
              <Button type="primary" style="margin-right:20px" @click="updateUserInfo">确定</Button>
              <Button @click="updateCancel">取消</Button>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>
    <!-- 修改密码 -->
    <Modal v-model="ModifyPasswordModal" title="修改密码" footer-hide="true" class="pswModal" :mask-closable="false">
      <Form ref="formPsw" :model="updatePasswordInfo" :rules="pswRules">
        <Row>
          <i-col
            span="4"
            style="height:32px; line-height:32px; text-align:right; margin-right:8px;"
          >原密码</i-col>
          <i-col span="16">
            <FormItem prop="oldPassword">
              <i-input
                type="password"
                v-model="updatePasswordInfo.oldPassword"
                placeholder="请输入原密码"
              ></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col
            span="4"
            style="height:32px; line-height:32px; text-align:right; margin-right:8px;"
          >新密码</i-col>
          <i-col span="16">
            <FormItem prop="newPassword">
              <i-input
                type="password"
                v-model="updatePasswordInfo.newPassword"
                placeholder="请输入新密码"
              ></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col
            span="4"
            style="height:32px; line-height:32px; text-align:right; margin-right:8px;"
          >确认新密码</i-col>
          <i-col span="16">
            <FormItem prop="confirmPassword">
              <i-input
                type="password"
                v-model="updatePasswordInfo.confirmPassword"
                placeholder="请再次新输入新密码"
              ></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="24" style="margin-top:10px; text-align:right;">
            <FormItem>
              <Button type="primary" style="margin-right:20px" @click="updatePassword">确定</Button>
              <Button @click="pswCancel">取消</Button>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>

    <!-- 星级获得情况 -->
    <div style="margin-top:40px;">
      <Card>
        <p
          slot="title"
          style="height:50px; line-height:50px; color: rgba(80, 80, 80, 1); font-size: 18px; font-weight: bold;"
        >星级获得情况</p>
        <Button slot="extra" @click="starDetail" class="btnStar">既往详情</Button>
        <Card style="border:0;">
          <div class="star-header">
            今年累计获得
            <span
              style="color:rgba(255, 195, 0, 1); font-size:20px; font-weight:bold;"
            >{{starTotal}}</span>
            颗星
          </div>
          <!-- 月份获星级 -->
          <div class="star-body">
            <Row>
              <div class="star-line"></div>
              <Row>
                <i-col span="2" v-for="(item,index) in starList" :key="index">
                  <Row>
                    <i-col :class="index == 11?'vf':''">
                      <div :class="currentMonth!=index?'month-circle':'current-month'">{{index+1}}月</div>
                    </i-col>
                  </Row>
                  <Row style="margin-left:-5px;">
                    <i-col class="star-icon">
                      <span v-if="item.flag == 1">
                        <Icon type="ios-star" />
                      </span>
                      <span v-if="item.flag == 0">
                        <Icon type="md-star-outline" />
                      </span>
                    </i-col>
                    <div class="star-flag" v-if="item.flagOne == '1'">+1</div>
                  </Row>
                </i-col>
              </Row>
            </Row>
          </div>
        </Card>
      </Card>
    </div>
    <!-- 既往详情 -->
    <Modal
      v-model="modalDet"
      class="star-modal"
      footer-hide="true"
      :mask-closable="false"
      width="840px"
      closable
    >
      <p slot="header" class="star-tt">既往详情</p>
      <Card style="border:0;">
        <Row>
          <i-col span="8">
            <DatePicker
              type="year"
              v-model="year"
              :options="options"
              @on-change="dateChange"
              placeholder="统计年份"
              style="width: 200px"
            ></DatePicker>
          </i-col>
        </Row>
        <Row>
          <i-col span="24">
            <div id="c1" style="margin-left: -50px;"></div>
          </i-col>
        </Row>
      </Card>
    </Modal>

    <Row gutter="30" style="margin-top:40px;">
      <!-- 我的俱乐部 -->
      <i-col span="12" v-if="codeTotal > 0">
        <Card style="overflow:hidden;">
          <p slot="title" style="color:rgba(80, 80, 80, 1);font-size:16px;font-weight:bold;">我的俱乐部</p>
          <div class="demo">
            <Row>
              <i-col span="2" class="demo-icon">
                <Icon type="ios-arrow-back" style="cursor: pointer;" @click="upChange" />
              </i-col>
              <i-col span="20">
                <img :src="showClubDataList.path" alt />
                <div class="loop-tip">
                  <span>{{showClubDataList.clubName}}</span>
                  <Rate :count="10" v-model="showClubDataList.clubLevel" disabled />
                </div>
              </i-col>
              <i-col span="2" class="demo-icon">
                <Icon type="ios-arrow-forward" style="cursor: pointer;" @click="downChange" />
              </i-col>
            </Row>
          </div>
          <Row style="margin-top:40px;">
            <i-col span="24" style="text-align:center;">
              <div class="rewards-title">俱乐部奖励</div>
            </i-col>
          </Row>
          <Row gutter="10" style="margin-top:40px;">
            <i-col span="6" class="rewards-news">{{showClubDataList.rewardList[0]}}</i-col>
            <i-col span="6" class="rewards-news">{{showClubDataList.rewardList[1]}}</i-col>
            <i-col span="6" class="rewards-news">{{showClubDataList.rewardList[2]}}</i-col>
            <i-col span="6" class="rewards-news">{{showClubDataList.rewardList[3]}}</i-col>
          </Row>
          <Row gutter="10" style="margin-top:20px;">
            <i-col span="24" style="text-align:center;">
              <div class="club-line"></div>
            </i-col>
          </Row>
          <Row gutter="10" style="margin-top:40px;">
            <i-col span="24" style="text-align:center;">
              <div class="rewards-title">俱乐部成员 · {{codeTotal}}</div>
            </i-col>
          </Row>
          <Row gutter="10" style="margin-top:40px; max-height:660px; overflow-x:hidden;">
            <i-col span="24">
              <Row v-for="item in clubData" :key="item" class="club-list">
                <i-col span="12" style="padding-left:30px;">{{item.agentname}}</i-col>
                <i-col span="12" style="padding-left:30px;">{{item.managecomname}}</i-col>
              </Row>
            </i-col>
          </Row>
        </Card>
      </i-col>
      <i-col span="12" v-else>
        <Card style="overflow:hidden;">
          <p slot="title" style="color:rgba(80, 80, 80, 1);font-size:16px;font-weight:bold;">我的俱乐部</p>您并未加入任何俱乐部！
        </Card>
      </i-col>

      <!-- 业绩排名 -->
      <i-col span="12">
        <Card>
          <p slot="title" style="color:rgba(80, 80, 80, 1);font-size:16px;font-weight:bold;">业绩排名</p>
          <Row style="margin-top:20px;">
            <i-col
              span="6"
              class="month"
              style="margin-left:20px"
            >{{rankPersonInfo[4]}}年{{rankPersonInfo[5]}}月</i-col>
            <i-col span="8" style="height:40px;line-height: 40px; text-align:center">
              <span class="my-rank">我的排名：</span>
              <span class="score">{{rankPersonInfo[1]}}</span>
              <!-- 排名上升 -->
              <span v-if="rankPersonInfo[2]==0" class="icon-rank">
                <Icon type="md-arrow-round-up" />
              </span>
              <!-- 排名下降 -->
              <span v-if="rankPersonInfo[2]==1" class="icon-rank">
                <Icon type="md-arrow-round-down" />
              </span>
              <!-- 排名不变 -->
              <span v-if="rankPersonInfo[2]==2" class="icon-rank">
                <Icon type="md-remove" />
              </span>
            </i-col>
            <i-col span="8" style="height:40px;line-height: 40px; text-align:center">
              <span class="my-rank">品质分数：</span>
              <span class="score">{{rankPersonInfo[3]}}</span>
            </i-col>
          </Row>
          <Row style="margin-top:40px;" class="rank-table">
            <i-col span="24">
              <Table :columns="rankColumns" :data="rankData">
                <template slot-scope="{row}" slot="ranking">
                  <div class="info-rank">
                    <img v-if="row.ranking == '1'" src="static/image/personalCenter/101.png" alt />
                    <img v-if="row.ranking == '2'" src="static/image/personalCenter/102.png" alt />
                    <img v-if="row.ranking == '3'" src="static/image/personalCenter/103.png" alt />
                    <span
                      v-if="row.ranking!='1'&&row.ranking!='2'&&row.ranking!='3'"
                    >{{row.ranking}}</span>
                  </div>
                </template>
                <template slot-scope="{row}" slot="employeeIcon">
                  <div class="info-img">
                    <img :src="row.employeeIcon" alt />
                  </div>
                </template>
                <template slot-scope="{row}" slot="message">
                  <div class="info-news">
                    {{row.message[0]}}-{{row.message[1]}}
                    <br />
                    {{row.message[2]}}
                  </div>
                </template>
              </Table>
            </i-col>
          </Row>
        </Card>
      </i-col>
    </Row>

    <i-button @click="info" style="display:none"></i-button>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    // 手机号码校验
    const validatorPhone = (rule, value, callback) => {
      let accountReg1 = /^[0-9]+$/;
      if (!accountReg1.test(value)) {
        callback(new Error("手机号码只能输入数字"));
      }
      if (value.length !== 11) {
        callback(new Error("手机号码位数需为11位"));
      }
      let accountReg = /^[1][3-9][0-9]+$/;
      if (value != "" && !accountReg.test(value)) {
        callback(new Error("移动电话必需以13-19开头"));
      }
      callback();
    };
    // 邮箱校验
    const validatorEmail = (rule, value, callback) => {
      var emailReg3 = /^[\w\.\-\@]+$/;
      if (!emailReg3.test(value)) {
        callback(new Error("邮箱只能包含字符数字和.-_@"));
      }
      var emailReg = /^([\w\-\.\u4e00-\u9fa5])+\@([\w\-\.])+\.([A-Za-z]{2,8})$/;
      if (!emailReg.test(value)) {
        callback(new Error("请输入有效的邮箱地址"));
      }
      var emailReg2 = /^([\w\-\.\u4e00-\u9fa5\@\.])*(\@\.|\.\@)+([\w\-\.\u4e00-\u9fa5])*$/;
      if (emailReg2.test(value)) {
        callback(new Error("请输入有效的邮箱地址"));
      }
      callback();
    };
    // 字母数字校验
    const validatorAccount = (rule, value, callback) => {
      let accountReg = /^[0-9A-Za-z]+$/;
      if (value != "" && !accountReg.test(value)) {
        callback(new Error("只支持数字字母录入"));
      } else {
        callback();
      }
    };
    //长度至少8位且包含数字字母
    const validatorLength = (rule, value, callback) => {
      let accountReg = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[~!@#$%^&*()_+|<>,.?/\\:;'\[\]{}\"\-]).{8,}$/
      if (value != '' && value.match(accountReg)== null) {
        callback(new Error('长度至少8位含字母,数字,特殊字符'))
      } else {
        callback()
      }
    }
    // 两次密码相同校验
    const validatorPsw = (rule, value, callback) => {
      if (this.updatePasswordInfo.confirmPassword !== "") {
        this.$refs.formPsw.validateField("confirmPassword");
        callback();
      } else if (this.updatePasswordInfo.confirmPassword !== "") {
        this.$refs.formPsw.validateField("confirmPassword");
        callback();
      } else {
        callback();
      }
    };
    // 两次密码相同校验
    const validatorResetPsw = (rule, value, callback) => {
      if (
        this.updatePasswordInfo.newPassword !== "" &&
        value !== this.updatePasswordInfo.newPassword
      ) {
        callback("两次输入密码不匹配");
      } else if (
        this.updatePasswordInfo.newPassword !== "" &&
        value !== this.updatePasswordInfo.newPassword
      ) {
        callback("两次输入密码不匹配");
      } else {
        callback();
      }
    };

    return {
      token: "",
      userInfo: {
        employeeIcon: "../../../../static/image/personalCenter/1252.jpeg", // 头像路径
        name: "张宁", // 姓名
        employeeNO: "32154", // 员工工号
        roleName: "外勤", // 职位
        company: "无锡分公司", // 公司
        email: "", // 邮箱
        phone: "", // 电话
        managecomName: "****" // 管理机构
      },
      userInfo2: {
        // name: "", // 姓名
        // email: "", // 邮箱
        // phone: "" // 电话
      },
      updateRules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { required: true, message: "姓名不能为空", trigger: "change" }
        ],
        phone: [
          { required: true, message: "电话不能为空", trigger: "blur" },
          { required: true, message: "电话不能为空", trigger: "change" },
          { validator: validatorPhone, trigger: "blur" },
          { validator: validatorPhone, trigger: "change" }
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { required: true, message: "邮箱不能为空", trigger: "change" },
          { validator: validatorEmail, trigger: "blur" },
          { validator: validatorEmail, trigger: "change" }
        ]
      },
      updatePasswordInfo: {
        newPassword: "",
        confirmPassword: "",
        oldPassword: ""
      },
      pswRules: {
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { required: true, message: "新密码不能为空", trigger: "change" },
          // { validator: validatorAccount, trigger: "blur" },
          // { validator: validatorAccount, trigger: "change" },
          { validator: validatorLength, trigger: 'blur' },
          { validator: validatorLength, trigger: 'change' },
          { validator: validatorPsw, trigger: "blur" },
          { validator: validatorPsw, trigger: "change" }
        ],
        confirmPassword: [
          {
            required: true,
            message: "再次输入新密码不能为空",
            trigger: "blur"
          },
          {
            required: true,
            message: "再次输入新密码不能为空",
            trigger: "change"
          },
          // { validator: validatorAccount, trigger: "blur" },
          // { validator: validatorAccount, trigger: "change" },
          { validator: validatorResetPsw, trigger: "blur" },
          { validator: validatorResetPsw, trigger: "change" }
        ],
        oldPassword: [
          { required: true, message: "原始密码不能为空", trigger: "blur" },
          { required: true, message: "原始密码不能为空", trigger: "change" }
        ]
      },
      action1: "",
      ModifyInfoModal: false,
      ModifyPasswordModal: false,
      // 星星数值
      starList: [
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        },
        {
          yearMonth: "",
          flag: 0,
          flagOne: 0,
          totalScore: "",
          ranking: ""
        }
      ],
      starTotal: 0,
      modalDet: false,
      data: [
        {
          day: "1月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "2月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "3月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "4月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "5月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "6月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "7月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "8月",
          rate: null,
          rateName: "排名",
          value: "",
          valueName: "质量评分"
        },
        {
          day: "9月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "10月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "11月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        },
        {
          day: "12月",
          rate: null,
          rateName: "排名",
          value: null,
          valueName: "质量评分"
        }
      ],
      yearState: false,
      chart: null,
      options: {
        disabledDate(date) {
          return (
            date.valueOf() < Date.parse("2016") || date.valueOf() > Date.now()
          );
        }
      },
      num: 0,
      clubData: [],
      // 排名
      rankColumns: [
        {
          title: " ",
          key: "ranking",
          slot: "ranking",
          align: "center",
          width: 60
        },
        {
          title: "姓名",
          key: "employeeIcon",
          slot: "employeeIcon",
          align: "center",
          width: 80
        },
        {
          title: " ",
          key: "message",
          slot: "message"
        },
        {
          title: "品质分数",
          key: "totalScore",
          align: "center"
        }
      ],
      rankData: [],
      rankPersonInfo: [],
      userCode: null,
      currentDate: null,
      starList1: [
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        },
        {
          yearMonth: "",
          flag: "0",
          totalScore: 0,
          ranking: 0
        }
      ],
      // 俱乐部
      clubDataList: [],
      showClubDataList: [],
      currentClubId: null,
      codeTotal: 0,
      currentIndex: 0,
      clubTotal: 0,
      currentMonth:''
    };
  },
  methods: {
    info(tip) {
      this.$Message.info(tip);
    },
    handleSuccess(res, file) {
      // console.log(res);
      if (res.code === 200) {
        this.getUserInfo();
        this.info("修改成功");
      } else {
        this.info("修改失败");
      }
    },
    async getUserInfo() {
      let res = await this.api.getUserInfo();
      this.userInfo = res.data;
      this.action1 =
        // sessionStorage.getItem("userIp") + `api/user/chatHeadChange`;
        `/scrm-gateway/scrm-uer/api/user/chatHeadChange`;
      this.selectMyClubList();
    },
    updateUser() {
      console.log(this.userInfo)
      this.userInfo2 = this.userInfo;
      // this.userInfo2.name = this.userInfo.name;
      // this.userInfo2.phone = this.userInfo.phone;
      // this.userInfo2.email = this.userInfo.email;
      this.ModifyInfoModal = true;
    },
    async updateUserInfo() {
      this.$refs.formInline.validate(valid => {
        // console.log(valid)
        if (valid) {
          this.api.updataUserInfo(this.userInfo2).then(res => {
            if (res.code === 200) {
              this.info("修改成功！");
              this.ModifyInfoModal = false;
            } else {
              this.info("修改失败！");
            }
          });
        }
      });
      // let res = await this.api.updataUserInfo(this.userInfo);
      // if (res.code === 200) {
      //   this.info("修改成功！");
      // } else {
      //   this.info("修改失败！");
      // }
    },
    updateCancel() {
      this.userInfo2 = this.userInfo;
      this.ModifyInfoModal = false;
    },

    updatePassword() {
      this.$refs.formPsw.validate(valid => {
        if (valid) {
          this.api
            .updatePassword({
              newPassword: this.updatePasswordInfo.newPassword,
              oldPassword: this.updatePasswordInfo.oldPassword
            })
            .then(res => {
              if (res.code === 200) {
                this.info(res.msg);
                setTimeout(() => {
                  Cookies.remove("user");
                  Cookies.remove("password");
                  Cookies.remove("hasGreet");
                  Cookies.remove("access");
                  Cookies.remove("principal");
                  this.$store.commit("clearOpenedSubmenu");
                  localStorage.clear();
                  sessionStorage.clear();
                  this.ModifyPasswordModal = false;
                  this.$Modal.info({
                      title: '当前登录信息已失效，请重新登录！',
                      okText: '确定',
                      onOk: ()=> {
                            this.$router.push({
                        name: 'login'
                      });
                      }
                  });
                }, 500);
              } else {
                this.info(res.msg);
              }
            });
        }
      });
      // if (
      //   this.updataPasswordInfo.newPassword !==
      //   this.updataPasswordInfo.confirmPassword
      // ) {
      //   this.info("请确认密码是否一致");
      //   return;
      // }
      // let res = await this.api.updatePassword({
      //   newPassword: this.updataPasswordInfo.newPassword,
      //   oldPassword: this.updataPasswordInfo.oldPassword
      // });
      // if (res.code === 200) {
      //   this.$router.push({ name: "log" });
      //   this.info(res.msg);
      //   sessionStorage.removeItem("credentials");
      // }
      // console.log(res);
    },
    pswCancel() {
      this.$refs.formPsw.resetFields();
      this.ModifyPasswordModal = false;
    },

    // 个人得星情况
    getOneYearStars() {
      let year = new Date();
      let obj = {
        reagentCode: this.userCode,
        year: year.getFullYear()
      };
      this.api.getOneYearStars(obj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            // this.starList = res.data;
            for (var j = 0; j < res.data.length; j++) {
              this.starList[j].flag = res.data[j].flag;
              this.starList[j].totalScore = res.data[j].totalScore;
              this.starList[j].ranking = res.data[j].ranking;
            }
            this.starList[0]["flagOne"] = "0";
            this.starList[1]["flagOne"] = "0";
            this.starList[2]["flagOne"] = "0";
            // 给标志是否+星1
            for (var i = 3; i < this.starList.length; i++) {
              if (
                this.starList[i].flag == "1" &&
                this.starList[i - 1].flag == "1" &&
                this.starList[i - 2].flag == "1" &&
                this.starList[i - 3].flag == "1"
              ) {
                this.starList[i]["flagOne"] = "1";
                this.starTotal++;
              } else {
                this.starList[i]["flagOne"] = "0";
              }
            }

            // 获得星数
            for (var i = 0; i < this.starList.length; i++) {
              if (this.starList[i].flag == "1") {
                this.starTotal++;
              }
            }

            this.starList1 = res.data;
          } else {
            this.starList = [
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              },
              {
                yearMonth: "",
                flag: 0,
                flagOne: 0,
                totalScore: "",
                ranking: ""
              }
            ];
            // this.info("暂无数据");
          }
        } else {
          this.starList = [
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            },
            {
              yearMonth: "",
              flag: 0,
              flagOne: 0,
              totalScore: "",
              ranking: ""
            }
          ];
          this.info(res.msg);
        }
      });
      // console.log(this.starList);
    },

    // 年份改变时，再次查询详情
    dateChange(date) {
      this.currentDate = date;
      this.starDetail();
    },
    // 既往详情
    starDetail() {
      this.modalDet = true;
      let year = new Date();
      if (this.currentDate == null) {
        this.currentDate = year.getFullYear();
      }
      let obj = {
        reagentCode: this.userCode,
        year: this.currentDate
      };
      this.data = [];
      this.api.getOneYearStars(obj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            for (let k = 0; k < res.data.length; k++) {
              let monthInfo = {
                day: "",
                rate: 0,
                rateName: "排名",
                value: 0,
                valueName: "质量评分"
              };
              monthInfo.day = k + 1 + "月";
              monthInfo.value = Number(res.data[k].totalScore);
              monthInfo.rate = Number(res.data[k].ranking);
              this.data.push(monthInfo);
              // this.data[k].value = Number(res.data[k].totalScore);
              // this.data[k].rate = Number(res.data[k].ranking);
              // this.starList[k].flag = res.data[k].flag;
              // this.starList[k].yearMonth = res.data[k].yearMonth;
              // this.starList[k].totalScore = res.data[k].totalScore;
              // this.starList[k].ranking = res.data[k].ranking;
            }
            // this.starList1 = res.data;
          } else {
            this.data = [];
            this.info("暂无数据");
          }
          // 绘图
          this.gChart();
        } else {
          this.data = [];
          this.info(res.msg);
        }
      });
    },
    // G2图表--->柱状图、--->折线图
    gChart() {
      if (this.yearState == false) {
        this.yearState = true;
        this.chart = new G2.Chart({
          container: "c1",
          width: 800,
          height: 400,
          padding: [70, 30, 30, 80]
        });
      }

      this.chart.source(this.data);
      this.chart.scale("rate", {
        // alias: "(百分比)",
        tickInterval: 20,
        min: 0,
        max: 200
      });
      this.chart.scale("value", {
        // tickInterval: 20,
        // min: 0,
        // max: 100
      });
      this.chart.tooltip({
        crosshairs: {
          type: "line"
        }
      });
      this.chart.axis("day", {
        line: {
          stroke: "#999999" // 坐标轴线颜色
        },
        label: {
          textStyle: {
            fill: "rgba(78, 78, 78, 1)", // type列文本的颜色
            fontSize: "14"
          }
        },
        // 坐标轴刻度线
        tickLine: {
          alignWithLabel: false,
          length: 0
        }
      });
      this.chart.axis("rate", {
        line: null,
        label: null,
        title: null
      });
      // 图标图例
      this.chart.legend("rateName", {
        position: "top",
        itemGap: 30, //图例间的宽度
        marker: "circle", //图例的marker样式
        offsetY: -10,
        textStyle: {
          fill: "rgba(78, 78, 78, 1)",
          fontSize: "14" // 文本大小
        }
      });
      this.chart.legend("valueName", {
        position: "top",
        itemGap: 30, //图例间的宽度
        marker: "circle", //图例的marker样式
        offsetY: -10,
        textStyle: {
          fill: "rgba(78, 78, 78, 1)",
          fontSize: "14" // 文本大小
        }
      });
      this.chart
        .line()
        .label("rate", rate => {
          // 折线上方文本rgba(146, 194, 228, 1)
          return {
            textStyle: {
              fill: "pink",
              fontWeight: "bold"
            },
            content: rate
          };
        })
        .position("day*rate")
        .color("rateName", rateName => {
          //折线颜色rgba(146, 194, 228, 1)
          return "rgb(255, 159, 159)";
        }); // 让图表图例显示
      this.chart
        .point()
        .label("value", value => {
          // 柱状图文本
          return {
            labelLine: false, // 不显示文本的连接线
            offset: 10, // 文本距离图形的距离
            htmlTemplate: (text, item, index) => {
              // console.log(text, item, index);
              console.log(this.starList1)
              if (this.starList1[index].flag == 1) {
                return (
                  "<span style='display: inline-block;width: 50px; text-align:center; color: #f8bd08 !important;'>" +
                  text +
                  "</span>"
                );
              } else {
                return (
                  "<span style='display: inline-block;width: 50px; text-align:center; color: red !important;'>" +
                  text +
                  "</span>"
                );
              }
              // 自定义 html 模板
            }
          };
        })
        .position("day*value")
        .size(4) // 点的size
        .shape("hollowCircle")
        .style({
          // 圆圈环的颜色rgba(146, 194, 228, 1)
          stroke: "#ffffff",
          lineWidth: 1
        });

      this.chart.axis("value", false); // 隐藏坐标轴
      this.chart
        .interval()
        .position("day*value")
        .color("valueName"); //将数据值映射到图形的位置上的方法。
      // .shape("borderRadius") // 使用上面的Shape控制形状和大小
      // .size("size", size => {
      //   return 13;
      // });
      this.chart.render();
    },

    // 个人排名
    getAllRanking() {
      let date = new Date();
      let toMonth = null;
      let mm = date.getMonth();
      if (mm == 0) {
        mm = 12;
      }
      if (mm > 9) {
        toMonth = date.getFullYear() + "-" + mm;
      } else {
        toMonth = date.getFullYear() + "-" + ("0" + mm);
      }
      let obj = {
        reagentCode: this.userCode,
        yearMonth: toMonth
      };
      // console.log(obj)
      this.api.getAllRanking(obj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.rankData = res.data[1];
            this.rankPersonInfo = res.data[0];
            this.rankPersonInfo[4] = this.rankPersonInfo[0].substr(0, 4);
            this.rankPersonInfo[5] = Number(
              this.rankPersonInfo[0].substr(5, 6)
            );
            // console.log(this.rankPersonInfo)
          }
        } else {
          this.info(res.msg);
          this.rankData = [];
        }
      });
    },

    // 我的俱乐部
    selectMyClubList() {
      let obj = {
        managecom: this.userInfo.managecom, //续期管理机构
        agentcodeList: this.userCode, //续期人员工号
        index: 1,
        pageSize: 500
      };
      // console.log(obj);
      this.clubDataList = [];
      this.api.queryClubAllInfo(obj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            if (res.data.records.length) {
              this.clubDataList = res.data.records;
              this.showClubDataList = this.clubDataList[0];
              this.clubTotal = res.data.total;
              this.currentClubId = this.clubDataList[0].clubId;

              if (this.clubDataList) {
                this.clubDataList.forEach(element => {
                  if (element.clubName) {
                    if (element.clubName.length > 5) {
                      element.clubName.substr(0, 5);
                    }
                  }
                });
              }

              this.getCurrentClubCode();
              // console.log(this.clubData)
            }
          }
        } else {
          this.clubDataList = [];
          this.info(res.msg);
        }
      });
    },

    // 俱乐部成员
    getCurrentClubCode() {
      let obj = {
        agentcodeList: this.userInfo.employeeNO,
        managecom: this.userInfo.managecom,
        clubid: this.currentClubId,
        index: 1,
        pageSize: 500,
        type: "1"
      };
      // console.log(obj)
      this.clubdata = [];
      this.api.selectClubNum(obj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.clubData = res.data.records;
            this.codeTotal = res.data.total;
          } else {
            this.clubData = [];
            this.codeTotal = 0;
          }
        } else {
          this.clubData = [];
          this.codeTotal = 0;
          this.info(res.msg);
        }
      });
    },

    // 前一个俱乐部
    upChange() {
      if (this.clubTotal > 1) {
        this.currentIndex--;
        if (this.currentIndex >= 0) {
          this.showClubDataList = this.clubDataList[this.currentIndex];
          this.currentClubId = this.clubDataList[this.currentIndex].clubId;
          this.getCurrentClubCode();
        } else {
          this.currentIndex = this.clubTotal - 1;
          this.showClubDataList = this.clubDataList[this.currentIndex];
          this.currentClubId = this.clubDataList[this.currentIndex].clubId;
          this.getCurrentClubCode();
        }
      }
      // console.log(this.currentIndex,this.clubTotal)
    },

    // 后一个俱乐部
    downChange() {
      if (this.clubTotal > 1) {
        this.currentIndex++;
        if (this.currentIndex < this.clubTotal) {
          this.showClubDataList = this.clubDataList[this.currentIndex];
          this.currentClubId = this.clubDataList[this.currentIndex].clubId;
          this.getCurrentClubCode();
        } else {
          this.currentIndex = 0;
          this.showClubDataList = this.clubDataList[this.currentIndex];
          this.currentClubId = this.clubDataList[this.currentIndex].clubId;
          this.getCurrentClubCode();
        }
      }
      // console.log(this.currentIndex,this.clubTotal)
    }
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    this.token = sessionStorage.getItem("credentials");
    this.userCode = sessionStorage.getItem("useragentcode");
    this.currentMonth = new Date().getMonth();

    this.getOneYearStars();
    this.getAllRanking();
  }
};
</script>

<style lang="less" scoped>
@import "./index";
</style>

<style lang="less">
.personal-center {
  .ivu-modal-header {
    background-color: #2d8cf0;
  }
  .ivu-modal-header-inner {
    color: #fff;
  }
}

.star-modal .ivu-modal-header {
  border-top: 50px;
  background-color: rgba(199, 0, 25, 1);
}
.star-modal .ivu-modal-header > .star-tt {
  background-color: rgba(199, 0, 25, 1);
  color: #fff;
}
.ivu-icon-ios-close:before {
  color: #fff !important;
}

.ivu-table-cell {
  padding-left: 0;
  padding-right: 0;
}

.upModal .ivu-modal-header {
  background-color: #2d8cf0;
}
.pswModal .ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-header-inner {
  color: #fff !important;
}
.ivu-card-body {
  padding: 16px;
}
</style>
